<template>
    <el-row class="tac" style="margin-top:50px;margin-bottom: 300px">
        <el-col :span="3" class="cebianlan">
            <el-menu
            class="el-menu-vertical-demo"
            @select="handleselect"
            >
            <!-- @open="handleOpen"
            @close="handleClose" -->
            <div v-for="(category,cindex) in categoryList" :key="cindex" >
                <el-submenu v-if="category.children" :index="category.value" >

                <template slot="title" ><span >{{category.label}}</span></template>

                <el-menu-item 
                v-for="(children,index) in category.children"
                :key="index" 
                :index="children.value"
                
                >{{children.label}}</el-menu-item>
                </el-submenu>
                <el-menu-item v-else :index="category.value">{{ category.label }}</el-menu-item>   
            </div>

            </el-menu>
        </el-col>

        <el-col :span="18">
            <el-row >
                <div v-for="(paper,index) in paperList" :key="index">
                    <el-col :span="4" class="pinfo">
                    <el-card class="box-card">
                       
                        <div slot="header" class="pimage">
                            <img src="~/assets/image/title.png" style="width:120px" >
                        </div>
                        <div class="image">
                            <!-- <router-link :to="'/introduce/'+paper.id" style="text-decoration: none;font-size:15px;"><span style="color:#000;">{{paper.name}}</span></router-link> -->
                            <router-link :to="{name:'introduce-pid',params:{pid:paper.id}}" style="text-decoration: none;font-size:15px;"><span style="color:#000;">{{paper.name}}</span></router-link>
                            <!-- <router-link to="/" style="text-decoration: none;font-size:15px;">进入试卷</router-link>
                            <el-button style="float: right; padding: 3px 0" type="text">进入试卷</el-button> -->
                        </div>
                    </el-card>
                    </el-col>
                </div>
            </el-row>
            <el-pagination
                background
                @size-change="fetchData"
                @current-change="fetchData"
                :current-page.sync="currentPage"
                :page-size.sync="pageSize"
                layout="prev, pager, next"
                :total="total"
                style="margin-top:2%;float: left"
                >
            </el-pagination>
        </el-col>

    </el-row>
</template>

<style>
.pimage{
    text-align: center;
}

.cebianlan{
    margin: auto 80px;
}

.pinfo{
    margin-right: 50px;
    margin-bottom: 20px;
}

.el-submenu .el-menu-item{
    min-width: 0px;
}


</style>


<script>
import axios from 'axios'
import paperApi from '@/api/paperApi';

export default {
    asyncData(){
        return paperApi.getPaperList(1,8).then(response =>{
            // console.log(response.data.items[0].name)
            return {
                paperList:response.data.items,
                total:response.data.total
                }
            console.log(paperList[0].name)
        });
        activeIndex: '4';
    },
    data() {
      return {
        categoryList:null,
        total:null,//总数量
        currentPage:  1,//当前页
        pageSize: 8,//每页大小
      };
    },

    created(){
        this.getCategoy()
    },
    
    methods: {
        fetchData(){
            paperApi.getPaperList(this.currentPage,this.pageSize).then(response =>{
            if(response.items)
            this.paperList = response.data.items
            this.total = response.data.total
        })
    },

        
        kan(){
            paperApi.kan().then(response =>{
                alert(response.data.message)
            })
        },

        getCategoy(){
            paperApi.getCascader().then(response =>{
                this.categoryList=response.data
        })
        
        },

        handleselect(key){
            paperApi.search(this.currentPage,this.pageSize,key).then(response =>{
                this.paperList = response.data.items
                this.total = response.data.total
        })
        }
    }

}
</script>
